{% extends 'front-base.html' %}
{% block content %}
    <div class="layui-col-md8">
        <div class="layui-row">
            <div id="topics">

            </div>
        </div>
        <div class="layui-row">
            <div id="posts">

            </div>
        </div>
    </div>
{% endblock %}
{% block utils %}
    {% verbatim %}
    <script type="text/html" id="art-item">
        <div class="layui-card">
            <div class="layui-card-header">
                <img src="{{item.author.avatar}}" class="layui-nav-img">{{item.author.username}}
                <span class="pub_time">{{item.pub_time|dateFormat "Y-m-d"}}</span>
                <span class="layui-badge">{{item.post_nums}}</span>
            </div>
            <div class="layui-card-body">
                <div class="title">{{ item.title }}</div>
                <hr class="layui-bg-blue">
                <div class="desc"><%- item.desc %></div>
                <a href="/topics/?topic={{ item.tid }}" class="detail"><span class="layui-badge layui-bg-blue">详情 ></span></a>
            </div>
        </div>
    </script>
    <script type="text/html" id="posts-item">
        <article class="post">
            <div class="post-date">
                <div class="date-month">{{item.pub_time|dateFormat 'm'}}月</div>
                <div class="date-day">{{item.pub_time|dateFormat 'd'}}</div>
            </div>
            {{ if item.type }}
            <div class="post-badge"><a href="/types/?type={{ item.type.id }}">{{item.type.name }}</a></div>
            {{ /if }}
            <div class="post-block">
                <h2 class="title"><a href="/p/{{ item.pid }}/">{{item.title}}</a></h2>
                {{ if item.topic }}
                <div class="topics">
                    <!-- {{ each item.topic topic }}
                        <a href="#">{{topic.title}} </a>
                    {{ /each }}  -->
                    <a href="/topics/?topic={{ item.topic.tid }}">{{item.topic.title}} </a>
                </div>
                {{ /if }}
                <div class="desc"><%- item.content %></div>
                <div class="to-detail">
                    <a href="/p/{{ item.pid }}/">阅读全文 »</a>
                </div>
            </div>
        </article>
    </script>
    {% endverbatim %}
{% endblock %}
{% block footer %}
    <script>
        var tid = getParams('topic')
        if (tid) {
            flowReload('#topics', `/api/v1/topics/${tid}/`)
            flowReload('#posts', `/api/v1/posts/?topic=${tid}`,'posts-item')
        } else {
            flowReload('#topics', '/api/v1/topics')
        }
        fixedFooter()
    </script>

{% endblock %}